<template>
  <div class="app-container">
    <div class="toolbar-section">
      <div class="ui_state">
        <search-bar :form="queryParams" @sub="getList" class="seach"></search-bar>
      </div>
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button @click="handleAdd" class="ui_asset">新增单据</el-button>
          <el-button @click="formPrint" class="ui_print">打印</el-button>
        </el-col>
        <right-toolbar @queryTable="Refresh"></right-toolbar>
      </el-row>
    </div>
    <div class="table-section">
      <vxe-table height="100%" ref="table" :data="tableData.list" :loading="tableData.loading" border stripe
        :pager-config="{ pageSize: tableData.paging.pageSize, total: tableData.paging.total }" @page-change="getList">
        <vxe-column type="checkbox" width="55" align="center" />
        <vxe-column field="status" title="状态" width="100" align="center">
          <template #default="{ row }">
            <dict-tag :options="apply_state" :value="row.state" />
          </template>
        </vxe-column>
        <vxe-column field="number" title="编号">
          <template #default="{ row }">
            <el-button style="margin-right: 10px;" link type="primary" size="small" @click="handleDetail(row.id)">
              {{ row.number }}
            </el-button>
          </template>
        </vxe-column>
        <vxe-column field="num" title="数量"></vxe-column>
        <vxe-column field="createUserName" title="申请人"></vxe-column>
        <vxe-column field="remark" title="备注"></vxe-column>

        <vxe-column title="操作" align="center" class-name="small-padding fixed-width">
          <template #default="{ row }">
            <el-button style="margin-right: 10px;" link type="primary" size="small"
              v-if="row.state === 0 || row.state === 3" @click="handleSub(row)">提交</el-button>
            <el-button style="margin-right: 10px;" link type="primary" size="small"
              v-if="row.state === 0 || row.state === 3" @click="handleUpdate(row)">修改</el-button>
            <el-button v-if="row.state === 0 || row.state === 3" size="small" link type="primary"
              @click="handleDelete(row)">删除</el-button>
            <el-button v-if="row.state !== 0 && row.state !== 3" size="small" link type="primary"
              @click="handleDetail(row.id)">审批详情</el-button>
            <el-button v-if="row.state !== 0 && row.state !== 3" size="small" link type="primary"
              @click="formPrintOne(row)">打印</el-button>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div>
      <pagination v-show="tableData.paging.total > 0" :total="tableData.paging.total"
        v-model:page="tableData.paging.pageNum" v-model:limit="tableData.paging.pageSize" @pagination="getList" />
    </div>
    <edit :apply-type-name="applyTypeName" :apply-type="applyType" ref="edit" @sub="handleAddSuccess"></edit>
    <detail ref="detailDialog"></detail>
  </div>
</template>

<script setup>
import api from "./api.js";
import Edit from './edit.vue'
import SearchBar from "./SearchBar.vue";
import Detail from "./detail/index.vue";

const edit = ref();
const detailDialog = ref();

const { proxy } = getCurrentInstance();
const { apply_state } = proxy.useDict("apply_state");

// 申请类型
const applyType = 'ZCRK';
// 申请类型
const applyTypeName = '入库申请';

const queryParams = reactive({
  applyType: applyType,
});

const table = ref();

const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

async function getList() {
  tableData.loading = true;
  const { pageNum, pageSize } = tableData.paging;

  const query = { ...queryParams };
  const pageReq = { page: pageNum - 1, size: pageSize };

  try {
    const response = await api.list(query, pageReq);
    const { content, totalElements } = response;
    if (content && content.length > 0) {
      content.forEach(item => {
        if (item.formData) {
          let formData = JSON.parse(item.formData);
          Object.assign(item, formData);
        }
      });
    }
    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;
  } catch (e) {
    tableData.loading = false;

  }
}
async function Refresh() {
  await getList();
  proxy.$message.success("刷新成功");
}
/** 新增操作成功后的回调 */
function handleAddSuccess() {
  // 新增成功后的处理
  proxy.$message.success("新增成功");
  getList();  // 刷新数据
}

/** 新增按钮操作 */
function handleAdd() {
  edit.value.open();
}

function formPrint() {
  const selectedList = table.value.getCheckboxRecords();
  if (selectedList.length === 0) {
    proxy.$message.warning('请选择需要打印的项');
    return;
  }
  selectedList.forEach(item => {
    window.open(`./#formPrint/${applyType}/${item.number}`);
  })
}

function formPrintOne(item) {

  window.open(`./#formPrint/${applyType}/${item.number}`);

}

/** 修改按钮操作 */
function handleUpdate(row) {
  edit.value.open(row);
}

function handleDetail(row) {
  detailDialog.value.open(row);
}

function handleSub(row) {
  api.sub(row.id).then(() => {
    getList();
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除').then(function () {
    return api.del(row.id);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}

onMounted(() => {
  getList()
})

</script>

<style lang="scss" scoped>
.ui_state {
  height: 40px;
  background-color: #fff;
  margin-bottom: 4px !important;
  margin: -8px;
}

.ui_asset {
  width: 74px;
  height: 32PX;
  background-color: #005bf5;
  color: #fff;
  margin-top: 3px;
  margin-bottom: 3px;
  border: 0px solid #fff;
  border-radius: 8%;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.ui_asset:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.ui_print {
  width: 74px;
  height: 32PX;
  margin-left: 10px;
  transition: background-color 0.3s, box-shadow 0.3s;
}

</style>
